<!--
 * @Author: your name
 * @Date: 2021-08-16 08:33:47
 * @LastEditTime: 2021-11-29 16:51:16
 * @LastEditors: by
 * @Description: In User Settings Edit
 * @FilePath: \yyzxwebd:\hsx\水文局设备运行巡检管理平台\web\src\views\equipmentManage\safeGuardList\add.vue
-->
<template>
    <el-dialog 
        :title="'用户详情'" 
        :model-value="visible"
        :destroy-on-close="true"
        width="600px"
        :before-close="onCancel"
    >
        <el-form class="form form_height noScrollbar" ref="form" :model="form"  label-width="100px" label-position="right">
                <el-form-item label="头像:" prop="avatar">
                    <img :src="form.imgUrl? Url + form.imgUrl: require('../../../assets/img/user.png')" style="width:70px;height:80px" alt="">
                </el-form-item>
                <el-form-item label="姓名:" prop="username">
                    <span>{{form.username}}</span>
                </el-form-item>
                <el-form-item label="手机号:" prop="mobile">
                    <span>{{form.mobile}}</span>
                </el-form-item>
                <el-form-item label="职位:" prop="position"> 
                    <span>{{form.position}}</span>
                </el-form-item>
                <el-form-item label="部门:" prop="deptId">
                    <span>{{form.deptName}}</span>
                </el-form-item>
                <el-form-item label="角色:" prop="roleId">
                    <span>{{form.roleName}}</span>
                </el-form-item>
                  <el-form-item label="状态">
                    <span :style="{'color':form.status == '0'? '#0AD100':'#FF7272'}">{{form.status === '0'?' 正常':'禁用'}}</span>
                </el-form-item>
            </el-form>
      
    </el-dialog>
</template>
<script>
import { formatTimestamp } from '@/utils/common'
import userApi from '@/api/user'
import { Url } from '@/api/url'
export default {
    emits: ['onChange'],
    components:{
    },
    props:{
        visible:{
            default:false,
            type: Boolean
        },
        
        item:{
            default:()=>{
                return {}
            },
            type: Object
        }
    },
    data(){
        var validatorPhone = function (rule, value, callback) {
            if (value === '') {
                callback(new Error('手机号不能为空'))
            } else if (!/^1\d{10}$/.test(value)) {
                callback(new Error('手机号格式错误'))
            } else {
                callback()
            }
        };
        return {
            Url,
            loading:false,
            form:{ },
            
            // 下拉数据
            comboList:[],
            roleList:[],
            titleList:[],
        }
    },
    watch:{
        visible(newValue){
            if(newValue){
                this.$nextTick(()=>{
                    this.$refs['form'].resetFields()
                })
                this.getlistCombobox()
                this.getlistRolebox()
                // if(this.type == 'edit'){
                //     this.form = JSON.parse(JSON.stringify(this.item))
                // }
                this.getDetail(this.item.id)
            }else{
                this.$refs['form'].resetFields()
                this.form = {}
                this.form.status = '0'
                this.comboList = []
                this.roleList = []
                this.titleList = []
            }
        }
    },
    created(){
    },
    methods:{
        getDetail(id) {
            userApi.userDetail(id)
                .then(res => {
                    this.form = res.data
                })
                .catch(err => {
                    this.$message.error(err.message)
                })
        },
        // 获取下拉数据
        getlistCombobox(){//部门
            userApi.getlistCombobox().then((res)=>{
                if(res.data.length === 0) {
                    return
                }
                this.comboList = res.data || []
            }).catch((err)=>{
                this.$message.error(err.message)
            })
        },
        getlistRolebox(){//角色
            userApi.getlistRolebox().then((res)=>{
                this.roleList = res.data
            }).catch((err)=>{
                this.$message.error(err.message)
            })
        },
        handleAvatarSuccess(res) {
            // this.form.picture = res.data.fileUrl
            this.form.avatar = res.data.fileUrl
        },
        beforeAvatarUpload(file) {
            if(file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/jpeg') {
                this.$message.warning('请上传图片格式')
                return false
            }
        },
        
        onCancel(){
            this.$emit('onChange',{bool:false})
        }
    },
}
</script>
<style lang="scss" scoped>
    .form_height{
        max-height: 50vh;
        overflow-y: auto;
    }
    .width100{
        width: 100%;
    }
    ::v-deep.upload_box .el-upload-list__item-preview{
        display: none !important;
    }
    .img_box{
        display: flex;
        flex-wrap: wrap;
        &>div{
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            margin-right: 10px;
            border: 1px solid #DCDFE6;
            border-radius: 5px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            &:hover{
                .delete_icon{
                    background-color: rgba(0,0,0,0.7);
                    display: flex;
                }
            }
            .delete_icon{
                display: none;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                color: #fff;
                font-size: 20px;
            }
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                
            }
        }
        
    }
</style>

